<template>
	<view class="maxBox">
		<view class="content">
			<view class="contentList" v-for="(item,index) in list" :key="index">
				<view class="listaHeadere">
					<checkbox-group @click="checkboxChange(item.value)">
						<checkbox :value="item.value" color="#D91414" style="transform:scale(0.7)" :checked="item.checked" />
					</checkbox-group>
					<view class="listaHeadere-title">{{item.title}}</view>
					<!-- <view class="listaHeadere-time">{{item.estimate}}</<vie></vie>w> -->
				</view>
				<view v-for="(items,indexs) in item.childer" :key="indexs">
					<view class="xian"></view>
					<view class="listBox">
						<checkbox value="cb" color="#D91414" style="transform:scale(0.7)" @click="checkChange(items.values,index,indexs)"
						 :checked="items.checkeds" />
						<view class="listBoxCenter">
							<view class="listBoxImg">
								<image src="../../static/image/good-img.png" mode=""></image>
							</view>
							<view class="listBoxText">
								<view class="listIntroduce">
									<view class="listIntroduce-title">
										{{items.boxTitle}}
									</view>
									<view class="gauge">
										{{items.guige}}
									</view>
								</view>
								<view class="listBottom">
									<text class="paesPrice">￥{{items.paesPrice}}</text>
									<text class="origPrice">￥{{items.origPrice}}</text>
									<image src="../../static/image/sub.png" class="listSub" @click="sub(items)"></image>
									<input type="text" v-model="items.length" @input="items.length = Number($event.target.value.replace(/\D+/, ''))" />
									<text class="listAdd" @click="add(items)">+</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<l-modal ref="customModal" modalTitle="温馨提示" @onClickCancel="cancel" @onClickConfirm="confirm">
			<template>
				<p style="text-align: center;">确认将这一个宝贝删除吗？</p>
			</template>
		</l-modal>
		<view class="tabbar">
			<view class="icon">
				<view class="block">
					<view class="num">
						{{numb}}
					</view>
				</view>
			</view>
			<view class="price">
				<view class="goods-price">
					￥{{totalPrice}}
				</view>
				<view class="dispatching-price">
					配送费：￥5
				</view>
			</view>
			<navigator class="order" url="../order/order">
				立即下单
			</navigator>
		</view>
		<!-- <tabbar :number="totalPrice" :numb="numb"></tabbar> -->
	</view>
</template>

<script>
	import lModal from '@/components/l-modal/l-modal.vue'
	// import tabbar from "@/components/tabbar.vue"
	export default {
		data() {
			return {
				list: [{
						id: 1,
						title: '小爱河东路商超',
						estimate: '预计1-2日送达',
						checked: false,
						value: '全选1',
						childer: [{
								cid: 1,
								boxTitle: '比利时GuyLian吉利莲魅炫海马巧克力礼听 301g 进口生日礼物品零食',
								guige: '规格：301g,铁盒装，送20kg试吃品',
								paesPrice: '366',
								origPrice: '366',
								checkeds: false,
								values: '子集1',
								length: 1
							},
							{
								cid: 2,
								boxTitle: '比利时GuyLian吉利莲魅炫海马巧克力礼听 301g 进口生日礼物品零食',
								guige: '规格：301g,铁盒装，送20kg试吃品',
								paesPrice: '366',
								origPrice: '366',
								checkeds: true,
								values: '子集2',
								length: 1
							}
						]
					},
					{
						id: 2,
						title: '小爱河东路商超',
						estimate: '预计1-2日送达',
						checked: false,
						value: '全选2',
						childer: [{
								cid: 1,
								boxTitle: '比利时GuyLian吉利莲魅炫海马巧克力礼听 301g 进口生日礼物品零食',
								guige: '规格：301g,铁盒装，送20kg试吃品',
								paesPrice: '366',
								origPrice: '366',
								checkeds: false,
								values: '子集3',
								length: 1
							},
							{
								cid: 2,
								boxTitle: '比利时GuyLian吉利莲魅炫海马巧克力礼听 301g 进口生日礼物品零食',
								guige: '规格：301g,铁盒装，送20kg试吃品',
								paesPrice: '366',
								origPrice: '366',
								checkeds: false,
								values: '子集4',
								length: 1
							}
						]
					},
					{
						id: 3,
						title: '小爱河东路商超',
						estimate: '预计1-2日送达',
						checked: false,
						value: '全选3',
						childer: [{
								cid: 1,
								boxTitle: '比利时GuyLian吉利莲魅炫海马巧克力礼听 301g 进口生日礼物品零食',
								guige: '规格：301g,铁盒装，送20kg试吃品',
								paesPrice: '366',
								origPrice: '366',
								checkeds: false,
								values: '子集5',
								length: 1
							},
							{
								cid: 2,
								boxTitle: '比利时GuyLian吉利莲魅炫海马巧克力礼听 301g 进口生日礼物品零食',
								guige: '规格：301g,铁盒装，送20kg试吃品',
								paesPrice: '366',
								origPrice: '366',
								checkeds: false,
								values: '子集6',
								length: 1
							}
						]
					}
				],
				addList: []
			}
		},
		components: {
			// tabbar,
			lModal
		},
		onLoad() {
		},
		computed: {
			totalPrice() {
				let totalPrice = 0;
				this.list.map(item => {
					if (item.checked == true) {
						item.childer.map(i => {
							totalPrice += i.length * i.paesPrice
						})
					} else {
						item.childer.map(i => {
							if (i.checkeds !== false) {
								totalPrice += i.length * i.paesPrice
							}
						})
					}
				})
				return totalPrice
			},
			numb() {
				let numb = 0;
				let tru = []
				this.list.map(item => {
					if (item.checked == true) {
						numb += item.childer.length
					} else {
						item.childer.map(i => {
							if (i.checkeds !== false) {
								tru.push(i)
								numb += tru.length
							}
						})
					}
				})
				return numb
			}
		},
		methods: {
			checkboxChange(val) {
				this.list.forEach(item => {
					if (val == item.value) {
						item.checked = !item.checked
						if (item.checked) {
							item.childer.forEach(items => {
								items.checkeds = true
							})
						} else {
							item.childer.forEach(items => {
								items.checkeds = false
							})
						}
					}
				})
			},
			checkChange(val, idx, cidx) {
				var list = this.list[idx]
				this.list[idx].childer[cidx].checkeds = !this.list[idx].childer[cidx].checkeds
				var bool = 0
				this.list[idx].childer.forEach(item => {
					console.log(item.checkeds)
					if (item.checkeds == true) {
						bool += 1
					}
				})
				if (bool == this.list[idx].childer.length) {
					this.list[idx].checked = true
				} else {
					this.list[idx].checked = false
				}
			},
			sub(length) {
				if (length.length == 1) {
					this.$refs['customModal'].showModal()
				} else {
					length.length = length.length - 1
				}
			},
			add(length) {
				length.length = length.length + 1
			},
			cancel() {
				// do sth
			},
			confirm() {
				// do sth
			}
		}
	}
</script>

<style lang="scss" scoped>
	.maxBox {
		background: #F2F2F2;
		// height: 100vh;
	}

	.xian {
		border: 2rpx solid #F5F5F5;
		width: 100%;
		margin: 20rpx 0;
	}

	.header {
		height: 136rpx;
		background-color: #fff;
		line-height: 136rpx;
		text-align: center;
		position: relative;
		.header-delect {
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.content {
		overflow: hidden;
		padding: 0 20rpx;

		.contentList {
			// width: 100%;
			background-color: #fff;
			border-radius: 15rpx;
			padding: 20rpx;
			margin-top: 18rpx;

			.listaHeadere {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				font-weight: 600;

				.listaHeadere-title {
					color: #D91414;
					font-size: 30rpx;
					margin: 0 20rpx;
				}

				.listaHeadere-time {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.listBox {
				display: flex;

				// height:200rpx;
				.listBoxCenter {
					margin-right: 20rpx;
					display: flex;

					.listBoxImg {
						flex: 25%;
						width: 145rpx;
						height: 145rpx;
						margin-right: 14rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.listBoxText {
						flex: 75%;

						// display: flex;
						.listIntroduce {
							margin-right: 44rpx;

							.listIntroduce-title {
								font-size: 24rpx;
								color: #1A1A1A;
								font-weight: 600;
							}

							.gauge {
								color: #999999;
								font-size: 18rpx;
								background-color: rgba($color: #999999, $alpha: 0.2);
								padding: 4rpx;
								text-align: left;
								margin: 10rpx 0;
							}
						}

						.listBottom {
							display: flex;
							align-items: center;
							width: 102%;
							overflow: hidden;
							vertical-align: middle;

							.paesPrice {
								color: #FB942F;
								font-size: 28rpx;
								margin-right: 26rpx;
							}

							.origPrice {
								color: #999;
								font-size: 24rpx;
								text-decoration: line-through;
								margin-right: auto;
							}

							.listSub {
								display: inline-block;
								width: 40rpx;
								height: 40rpx;
								text-align: center;
								line-height: 40rpx;
							}

							input {
								width: 66rpx;
								height: 32rpx;
								margin: 0 4rpx;
								text-align: center;
								vertical-align: middle;
								border: 1rpx solid #E6E6E6;
								border-radius: 4rpx;
								font-size: 18rpx;
								color: #666666;
							}

							.listAdd {
								display: inline-block;
								width: 40rpx;
								height: 40rpx;
								background-color: #F70633;
								color: #FFFFFF;
								border-radius: 20rpx;
								text-align: center;
								line-height: 35rpx;
							}
						}
					}
				}
			}
		}
	}

	.tabbar {
		width: 100%;
		height: 108rpx;
		display: flex;
		// position: fixed;
		position: fixed;
		bottom: 100rpx;
		background-image: url(../../static/image/tabbar-bg.png);
		background-size: 100% 100%;
	}

	.icon {
		width: 112rpx;
		height: 90rpx;
		margin-top: 16rpx;
		margin-left: 46rpx;
		position: relative;
		background-image: url(../../static/image/tabbar-icon.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.block {
		width: 27rpx;
		height: 27rpx;
		position: absolute;
		top: 16rpx;
		left: 66rpx;
		background: #F70634;
		border-radius: 50%;
	}

	.num {
		text-align: center;
		font-size: 20rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.price {
		margin: 26rpx 23rpx;
	}

	.goods-price {
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.dispatching-price {
		font-size: 20rpx;
		font-weight: 400;
		color: #CCCCCC;
	}

	.order {
		position: absolute;
		right: 0rpx;
		padding: 0 50rpx;
		line-height: 108rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>
